J’étais bluffé au moment de la solution sur le problème des salaires, vraiment excellent ! Ça me donne presque envie de refacto tout mon code et remplacer mes boucles par ces méthodes quand c’est possible !
Au top ! J'espère que vous pourrez tester ça prochainement. Par contre, voyez ça comme une nouvelle habitude à prendre plutôt que de se lancer dans des chantiers de refactoring de 3 jours. Ce sera plus "digeste". 🙂 Bon développement, Simon.
Hello Simon, belle initiative de vouloir initer aux bases de js Cependant, une coquille que j'ai relevé : pour l'exo sur les salaires, tu effectues un map avec user.salary += 1000, qui a pour conséquence de modifier l'array de base, userList. Il serait préférable d'utiliser '+' tout simplement. Cela va un peu dans le sens contraire de ce que tu expliques en milieu de vidéo quand tu parles de .map( ) et d'éviter les effets de bord ... ;)
Non, map() ne modifie pas le tableau de base, il renvoie un nouveau tableau sur lequel il peut travailler avec la fonction reduce juste derrière. Le tableau de base ne bouge pas, zéro effet de bord tout est OK 👌 Définition : La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
@@fredericlossignol3874 même si map te retourne un nouvel array, les paramètres de son callback ne sont pas immutables. Donc si tu modifies une propriété d'un objet dans le callback, alors tu modifies l'array initial également (et c'est le cas ici avec '+=').
Ma fonction pour le sum est environ 3.7x plus rapide. Une version wasm avec rust pourrait être encore plus rapide. function get_salary_sum(user_list){let sum = 0;for (let user of user_list) {if (user.gender === 'M'){sum += user.salary + 1000}}return sum} La version ci-dessous pour savoir si un nombre est impair et légèrement plus rapide . function is_odd(number) {return (number & 0x1) === 0x1} Faire de la manipulation de tableaux sans prendre en compte les performances, ce n'est pas très professionnel.
Super vidéo ! Propre, efficace donc MERCI beaucoup. Pour les valeurs max et min, j'ai trouvé cette option avec Math : const maxValueArr = Math.max(...someArr); puis : const minValueArr = Math.min(...someArr);
Très bonne explication, notamment pour reduce! D'ailleurs, je sais que le but est de montrer la fonction reduce, mais au sujet des max et min, on peut faire encore plus concis: const maxValueArr = Math.max(...arr); const minValueArr = Math.min(...arr);
Désolé de ma question néophyte, mais que veux dire les 3 points entre les crochets ? C’est vraiment le code ou on est supposé les changer par une valeur quelconque selon la situation ?
@@philousk9482 oui les trois petits points sont nécessaires et ne peuvent être supprimés. En revanche "arr" est le nom de ton tableau, donc si tu as nommé le tien "numbers" il faudra écrire "Math.max(...numbers)" 😊
@@philousk9482 Sinon pour répondre à ta question concernant le sens caché derrière ces trois petits points "..." il s'agit d'un opérateur de propagation : il est utilisé pour étendre un tableau ou un objet en tant qu'arguments séparés. Par exemple ici, en écrivant "Math.max(numbers)" on envoie un tableau en argument "Math.max([1, 2, 3, 4, 5])" et ça ne fonctionnera pas. Mais si tu écris à la place "Math.max(...numbers)" ce sera comme si tu écrivais juste des nombre en arguments "Math.max(1, 2, 3, 4, 5)" et cette fois-ci tout fonctionnera parfaitement bien
Cool. Map, filter, reduce et sort sont les fondamentaux. Reduce est le plus difficile je confirme. Pour l'exo 5, j'aurai utilisé la méthode some() qui renvoie true si au moins 1 élément remplie la condition.
Salut @Allan, merci pour ton retour d'expérience ! Je suis pas le seul à avoir galéré sur reduce(), c'est rassurant. 😉 Concernant l'exercice 5, tu as raison car la méthode some() est plus explicite/performante. (Mais cela reste une variation de reduce() d'un point de vue fondamentale, tableau => value, donc je préfère montrer les fondamentaux d'abord et libre à tout le monde ensuite d'optimiser dans un second temps.) Bon développement, Simon.
Vraiment merci , c'est tres excellent cette maniere de coder, l'explication et l'exercice sont de taille pour mieux comprendre map(), filter() et reduce() tout simplement.
Dans l'exercice suggéré à la fin, le map est superflu. En effet, on applique un filter pour ne prendre que les hommes mais ensuite on peut faire un reduce où la fonction est (menSalaryTotal + 1000) + menSalary.... En se passant du map, on fait l'économie de devoir créer en mémoire un tableau intermédiaire... Ce qui, sur un grand jeu de donnés peut être salvateur pour les performances 😉
Hello Geofrey, l'objectif pédagogique des vidéos peut parfois faire un peu de mal au côté performance. Mais dans un deuxième temps, après avoir assimilé ce qui est présenté dans cette vidéo, bien sûr le retour est 100% pertinent. 😉
@@codeursenior je disais cela pour ceux qui nous lisent éventuellement afin qu'ils sachent qu'il est possible de faire une économie de performance substantielle 😉
En approfondissant un peu l'exercice je suis arrivé à la même conclusion, pour ceux que ça intéresse voici le code : const sumMenSalary = userList .filter((user) => user.gender === "M") .reduce((sum, user) => sum + user.salary + 1000, 0);
Parfaitement correct, mais tu doit donner une valeur de départ de 0 (second paramètre de la fonction reduce), si non, le premier élément de la liste n'auras pas de salaire bonifier. c'est un peut compliqué a comprendre/expliqué pour les néofite.
Salut a tous, Merci Simon pour ce tuto c clair et net , just pour une mise en forme que je trouve plus simple : const maxValueArr = Math.max(...somArr); Bonne continuation !!!
Bonjour je viens de découvrir cette vidéo car je suis toujours en apprentissage. Et dans le cadre d'amélioration de mon code je viens aussi de comprendre les objets itérables qui est pour moi aussi une autre solution. Certes cette vidéo m'a permis de revoir des notions, merci
Bonjour Simon j'ai commencé une formation de développeur web, et tes vidéos sont TOP. Bien expliquées, très claire .... Ca devient facile et sa donne du courage pour l'apprentissage. Merci
Félicitation à toi @Severin, tu montres l'exemple à tout le monde, il ne faut rien lâcher ! 👊👊👊 Bon développement et bon apprentissage pour la suite, À bientôt, Simon.
vraiment frère c'est la meilleur manière de factoriser son code javascript avec les histoires de for, while ou forEach on na plus besoin de ça et c'est très bien et facile a comprendre
Super exo, y compris pour la refactorisation du code. J'ai beaucoup appris 👍👍 et merci pour tes exemples concrets. Y a pas à dire, il faut s'entrainer pour que ça devienne un réflexe
Salut simon !!! Très belle vidéo. Pour l'exercice 3, concernant le calcul de la valeur maximale ou minimale du tableau. On pouvait aussi faire simplement ceci. const max = Math.max(...arr); const min = Math.min(...arr);
Très bien comme vidéo. tu donne de bonne exemple et d'explication!!! Juste pour mettre une basse, je suis une programmeur senior et je comprend pourquoi tu l'explique comme ça. Mais juste pour pinailler un peu : pour exo #3 il a encore plus simple en javascript pour spécifiquement min et max « Math.min.apply(null, ARRAY) » dont ARRAY est la liste contenant les nombres.
Excellente vidéo ! À tout hasard, est-ce que tu réalises de formation en lignes pour du JS ? Tu expliques bien, j'ai tout compris (à part le reduce lié aux salaires, j'ai un peu buggé en mettant un peu de temps pour capter, haha). Pour ma part, j'enchaine des tutos en ligne, mais c'est souvent du code débité sans réel approche pédagogique et explicative. Du coup, j'ai l'impression d'en faire des tonnes pour pas vraiment tout comprendre, et ça, c'est vraiment usant, car il suffirait de quelques secondes explicatives pour changer la donne. Bref, je découvre ta chaine, et donc je viens de m'abonner. Merci, franchement j'ai l'impression d'y voir plus clair :)
Merci pour l'explication des 3 méthodes ... Je les utilises souvent mais des fois je retrouve a faire un "filter" au lieux d'un "map" et l'inverse mais avec ton explication je ne me tromperais plus jamais :)
Je ne suis qu'à la résolution de l'exo1 ( et bien entendu j'ai fais une boucle pour doubler les éléments... ) et j'apprécie tellement tes explications poussées sur le pourquoi utiliser map() !
Hello, si tout à fait ! Ici l'objectif de la vidéo est d'illustrer le fonctionnement de reduce (tableau -> valeur). Mais every()/some()/Math.mix/Math.max sont des raccourcis bien pratiques !
Dans l'exemple 5 (qui consiste à vérifier si un tableau contient au moins un nombre impaire), la solution présentée n'est pas optimale. En effet, si le premier élément est impair, il est inutile de parcourir le restant dû tableau. Or, ici, tel que présenté, on va devoir avec la fonction filter, parcourir tous les éléments du tableau, jusqu'au bout... Si le tableau contient 100. 000 nombres ca peut représenter une perte de temps conséquente... Respectueusement 😉
Yep, c'est 100% vrai. (Pour le contexte, l'objectif prioritaire du code présenté est pédagogique. Une fois que vous avez assimilé ce qui est présenté dans la vidéo, vous pouvez tout à fait suivre la recommandation de Geofrey 👍)
@@codeursenior pour ceux qui nous liraient ou pour une prochaine vidéo pédagogique, il y a encore la fonction Array.prototype.some() qui permet de vérifier si un élément du tableau au moins rempli une certaine condition... Cette méthode renvoie "true" dès qu'un élément satisfait le prédicat passé en paramètre et sinon elle retourne "false" (c'est à dire quand aucun élément du tableau satisfait la condition)...
Hello :) Je me permet de te poser une (peut-être bête) question: Si j'ai bien compris, la méthode *filter* parcourt tout le tableau. Est-ce que cela ne serait pas mieux, au niveau des performances, lorsque l'on cherche à déterminer si au moins un valeur de notre tableau remplit une condition, de faire une boucle qui s'arrête à la première valeur remplissant la condition? Est-ce qu'utiliser une méthode comme *filter* ne va pas impacter, de manière significative, les performances lorsque l'on effectue cette opération sur un tableau contenant plusieurs milliers de données? J'en profite également pour te remercier pour tout ton travail, c'est super intéressant et agréable à suivre :)
Hello, il n'y a pas de questions bêtes. Côté frontend, on ne manipule presque jamais des tableaux de plusieurs milliers d'entrées. La question des performances avec filter, map et reduce est donc négligeable. Même si vous avez 1 million d'utilisateurs à afficher, vous utiliserez la pagination pour les afficher 20 par 20, par exemple.
Super vidéo et merci cependant j'ai une question au niveau des performances parce que j'imagine qu'à un moment ou un autre ces fonctions font un bien une boucle pour parcourir tout les éléments donc sachant qu'on peut résoudre l'exercice des salaires avec une boucle, il ne reste pas plus intéressant que filter, map et reduce cumulé?
Hello effectivement vous avez raison du point de vue de la performance pure. Cependant je proligie toujours la lisibilité du code quoi qu’il arrive. Surtout dans le développement frontend où on ne manipule jamais plus de 10 ou 20 données à la fois pour les présenter dans lInterace. Selon moi Map, filter et reduce me permette de mieux exprimer ce que je fais avec mon code qu’une boucle for. Voila ! 👍
Quelques remarques bienveillantes: 1- .some(e => e % 2 === 0) est plus concis que .filter(e => e % 2 === 0).length > 0 2- .map() et .filter() ne sont pas sans effet de bord car ils ne dupliquent les éléments du tableau d'origine que si ce sont des primitifs (shallow copy, ou copie par référence des autres types). Dans ton exemple avec les salaires par exemple les salaires du tableau d'origine sont réellement modifiés dans les objets (suffit d'appliquer ta formule pour calculer la somme puis de faire un console log du tableau d'origine, les salaires sont modifiés) 3- il existe 3 autres méthodes intéressantes dont je me sers chaque jour beaucoup .find(), .every(), et .sort() 4- A noter aussi que l'objet Map() est aussi un objet intéressant pour travailler sur des listes PS: Même après 8 ans dans le métier MDN est mon ami de chaque jour
Les notions que tu explique sont utiles et extensible à python également. Puisque ce langage pour les listes a aussi des méthodes associer pour effectuer certaine action. mais j’ai une question la méthode map ne fait elle pas un parcours de la liste et en créant une nouvelle avec les option demander. Comme pour filter et réduce également. On écrit un code plus propre en utilisant les fonctions que les développeurs du langage ont inclus nativement. Mais régulièrement dans les formations ils demandent tous de faire les mécanismes manuellement pour voir le concept dernière. Je me demande qu’elle est le plus rapide entre la méthode et le faire manuellement je crois que je vais essayer de voir ça. En tout cas tu explique des concept pratique j’ai hâte d’en découvrir d’avantage.
Salut, si tu ne sais plus si "odd" c'est pair ou impair, tu retiens cette technique : dans le mot "odd", il y a un nombre impair de lettres, et dans even, il y a un nombre pair de lettres
Hello, merci pour ton retour. Pouvoir ouvrir la console de votre navigateur : Cmd + Option + C (sur Mac) ou Ctrl + Maj + J (sous Windows). Bon développement, À bientôt.
Je viens de regarder cette vidéo avec un peu de retard, je me pose une question quant à la correction sur les salaires. Tu fais du filter, du map et du reduce. Ok c'est joli, ça fait super bien le taff et on comprend parfaitement. Mais pour moi c'est du joli... Perso, j'aurai fait : const manSalary = userList.reduce((salary, u) => salary + (u.gender === 'M' ? u.salary + 1000 : 0)) Une seule ligne, et j'ai pas besoin de parcourir trois fois des tableaux. Donc à mon avis, ma solution est plus rapide et moins consommateur. Un avis ? Merci. :)
super vidéo, très claire et bien expliquée ! J'ai deux questions. 1°) Dans l'exo 2, le .filter va parcourir le tableau doubleArr 2 fois et créer 2 nouveaux tableaux, y a t-il moyen de créer les deux nouveaux tableau en ne parcourant doubleArr qu'une fois ? 2°) Dans l'exo 5, si le reduce trouve une oddValue en première position, va t-il devoir finir de parcourir tout le tableau pour renvoyer true ? Merci pour le taf.
Hello @Benoit, merci. Voici mes réponses : 1) Filter permet d'expliciter votre traitement, plutôt que de perdre en lisibilité pour optimiser des nanos secondes que personne ne vous demanderas jamais. 2) Effectivement, on peut utiliser des méthodes plus optimisés une fois que l'on est à l'aise avec reduce(), comme some() ou every(). De manière, je pense que l'objectif est de créer du code performant pour les humais (lisibilité) plutôt que pour les machines. Bon développement, Simon.
Salut à tous, Pour les salaires je propose ça : court et éfficace : const menSalaryTotal = userList.map(user => user.gender === "male" ? {...user, salary: user.salary += 1000} : user)
Super vidéo, ça fait un moment que je connais map, filter, reduce, mais j'ai encore un peu de mal à me défaire de mes réflexes "while", mais ça rentre. Avec Reduce j'ai plus de mal, et j'ai un pb avec la valeur initiale de l'accumulateur, pour moi il faudrait l'indiquer obligatoirement
Bonjour @Jean-Bernard, merci pour ton retour. Concernant le reduce(), je vous encourage effectivement à expliciter la valeur de retour, cela se force à réfléchir dans un premier temps, et explicite le fonctionnement du code à la relecture. S'obliger à initialiser son accumulateur me semble donc une bonne pratique. 👍 (Même si j'ai pris des raccourcis avec le temps !) Bon développement pour la suite, Simon.
Très pratiques ces solutions. Merci. Et si tu nous parlais prochainement des Promesse de javascript pour les évènements asynchrones ? Actuellement je fais recours aux callback, mais je cherche une façon de faire plus "pro" !
Hello ! Je ne pense pas faire de vidéo sur l'asynchrone avec les Promesses. Sur la chaîne, je me concentrerai plutôt sur la programmation réactive et RxJS. C'est une solution que je préfère pour la gestion de traitements asynchrones complexes. Bon développement, Simon.
Pour l'exemple avec le map je trouves deux des arguments un peu tiré par les cheveux. Pour la variable intermédiaire on en a pas en utilisant le for..of, et pour le fait que c'est en une seule ligne ça c'est un choix de développement, on peut très bien mettre le for en one liner si ça nous pose un problème de l'avoir sur 3 lignes, et inversement mettre le map sur 3 ligne en ajoutant les bracket dans la fonction anonyme, ce qu'on seras d'ailleurs obligé de faire si on doit faire plusieurs traitement et pas qu'un seul. Sinon très intéressants, j'utiliserais certainement moins de boucle désormais, et j'avais jamais vraiment compris le reduce donc merci beaucoup pour ça aussi !
Salut @kArTechns, merci pour ton retour constructif. Mes retours rapides : - For...of : Tu as tout à fait raison. Je mentionne bien le for{} "nature" dans la vidéo mais il y a d'autres pistes d'améliorations que le map() pour éviter la variable intermédiaire, dont le for...of effectivement. - 1 ligne vs 3 lignes : Pas tout à fait d'accord, car faire tenir un traitement for() sur une ligne, ça doit être costaud et surprenant à relire. Une fonction fléchée d'une ligne peut tout à s'écrire sans brackets, c'est une convention répandue. Donc techniquement je suis d'accord avec toi, dans le code du quotidien, je maintiens mon 1 ligne VS 3 lignes. 😉 Qu'en penses-tu ? Au plaisir d'échanger, À bientôt, Simon.
Dans la fonction "toggleAlarmList()" à la ligne 2 (condition de la ternaire) "return isEveryAlarmActive() ?" serait plus juste, non? Excellent le fait de prendre des exemples concrets, bonne continuation.
Hello Eric, si tu me mets le time-link je peux regarder ça rapidement. Quoi qu'il en soit tu as surement raison, j'ai tendance à faire un méli-melo entre la prépa de la vidéo/tournage/montage. ^^
@@Green68200 Ok, j'ai compris. Alors les exemples de code sont plus là pour la compréhension. Cela ne correspond pas forcément à une codebase complète. Tu peux tout à fait stocker le résultat de la méthode `isEveryAlarmActive()` dans une variable temporaire pour un autre calcul ultérieur. 👍
Hello Mickaël, 100% d'accord. La seule "raison" est pédagogique. D'abord faire comprendre map/filter/reduce. Ensuite, libre à chacun de creuser et d'aller utiliser les "raccourcis" de reduce (tableau -> valeur unique). Par exemple : every/some/Math.max...etc... Bon développement, Simon.
Si ! En fait fondamentalement some() est une simple optimisation de ... reduce(), c'est-à-dire transformer un tableau en une valeur, ici un booléen. Un bon exercice est de réimplémenté some() avec reduce() ! 😉
Ce serait bien d'indiquer les coquilles/amélioration proposées par François Lx, Allan from Paris et Geofrey van Hecke minimalement dans la description ou (révons un peu) directement dans la vidéo sous forme de "popup".
Merci pour cette vidéo intéressante. J'ai une question et une remarque. La question : En terme d'optimisation, quand on veut juste s'assurer de la présence d'une valeur sur des grands tableaux, est-ce qu'un filter suivi d'un length n'est pas plus coûteux qu'un parcours qui s'arrête à la première valeur correcte pour renvoyer un booleen ? La remarque : Pour ton exo sur le total gagné, je reconnais l'intérêt pédagogique d'avoir voulu utiliser filter, map et reduce, mais je me serais personnellement épargné une ligne (et un parcours de tableau) en virant l'étape map et en incluant l'ajout de 1000 directement dans reduce : menSalaryTotal = userList.filter(user => user.gender == 'M') .reduce((menSalaryTotal, menSalary) => menSalaryTotal + menSalary + 1000);
Salut, très instructif et bien expliqué, mais j'ai une question concernant la méthode reduce(), je comprend bien l'avantage pour retourner la somme , mais pour la valeur max ou min a t elle un avantage par rapport a écrire ; const maxVal = Math.max(...someArr) ; ? Bien à vous et encore merci pour vos tutos géniaux ...Et ouep ça vaut le coup..
Merci pour votre retour, reduce est présente avec le côté pédagogique en tête ici. Effectivement je recommande Max ou Min pour calculer la valeur respective. Il faut le voir comme un raccourcis de syntaxe par rapport à Reduce. Obtenir une valeur à partir d’une collection.
Merci beaucoup Simon pour cette belle présentation, je l'ai trouvé particulièrement utile pour moi, car je suis un gros consommation des boucles. Par contre, j'ai bien réussi le petit test de la fin avec toujours une préoccupation sur la fonction reduce(). Puisque je me demande bien comment il a pu calculer la somme sans que je lui passe la clé "salary" dans la fonction, parce qu'en ajoutant cette clé, le résultat devient "NaN" const sum = userList.filter(user => user.gender == 'M').map(e => e.salary + 1000).reduce((sum, user) => sum + user.salary);
Hello Ulrich, top si vous faites moins de boucles ! Concernant votre question, c'est parce que dans la première opération map() a tranformé votre tableau de User en un tableau de nombre (les salaires). const user = [...] // Tableau d'objets User const user = [...].map(user => user.salary); // Tableau de nombres, salaires Est-ce que c'est plus clair pour vous ? Bon développement, Simon.
Bonjour Simon, J'apprends l'informatique il y a peu, alors excuse-moi à l'avance si ma question peut-être un peu idiote. - Ma question est dans l'exercice #1 (Je comprends ou tu veux en venir), mais je ne comprends pas quand je regarde le résultat sur la console.log je vois qu'il m'affiche le douche [2, 4, 6, 8, 10]. En suivant la logique, je ne devrai pas plutôt avoir deux fois [1, 2, 3, 4, 5] au lieux d'avoir le double ? Merci de pouvoir me éclaircir cette logique dans l'informatique comme aussi, merci pour tes contenus :)
Hello Romero, tu fais bien de poser de question. La seule chose d'idiote, c'est de ne pas poser de question. En fait, la méthode *map* va prendre en paramètre chaque élément du tableau initiale, successivement. Tu obtiendras donc un autre tableau de la même longeur en sortie, mais avec chaque élément transofrmé. [1, 10].map(e => e x 2) // [2, 20] À bientôt !
Bonjour Simon merci pour cette vidéo. Je cherche à sélectionner la value d'un input parmi d'autres input de même classe 'pas d'id, pour des raisons imposées + des buttons sans id également. Le button permettrait de sélectionner la value de l'input, et de la copier. Je parviens à sélectionner toutes les values de tous les input. Et malgré de nombreux essais aves this, je ne parviens pas à sélectionner l'input sur laquelle /lequel je vais cliquer. Si tu as une solution je suis preneuse, merci bcp
exo3 : pourquoi du coup tu as mis pour le 2ème cas le nom de l'accumulateur à "max" logiquement il devrait être comme tu dis , la valeur que tu attends en sortie non, donc "min" ? (c'est juste du nonmage ;-) )
La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.
@16:52 : const isOddValueArr = someArr.some(e => e % 2 != 0) permet de s'arrêter dès qu'on a la première valeur odd, ça évite de calculer les N éléments de l'array (mieux pour les perfs) dans le même genre il y a someArr.every qui vérifie que tous les éléments de l'array vérifient une condition
Tout à fait, n'hésitez pas à abuser de some() et every(), c'est un régal à utiliser. (Par rapport à la vidéo, some() et every() sont des variantes de reduce() au niveau de la réflexion. On transforme un tableau en une valeur unique, à savoir un booléen)
Merci pour la vidéo ! Pour l'exo 5, bon c'est peut-être un peu moins lisible mais je me dis qu'au moins je ne lance qu'un seul traitement de l'array niveau opti : const maxMenSalary = userList.reduce((total, currentUser) => currentUser.gender === 'M' ? total + currentUser.salary + 1000 : total, 0)
Effectivement, ça fonctionne ! 👍 Peut-être la lisibilité un peu plus costaud à la relecture (ternaire/condition dans un reduce). Bon développement pour la suite, Simon.
@@codeursenior jai pris ta formation node js peut ton lentamer sans connaître un framework front ou apprendre un framework frobt avant de se lancer sur du node
Holà, non NodeJS ne nécessite pas de connaître un framework frontend. Après dans le cas où tu développes une API Rest, ça te permet d'avoir une culture général pour comprendre pourquoi on expose des JSON à certaines URL. Mais ça reste du bonus. Au boulot, pas d'excuses ! 😉
pour l'exo 5 il me semble qu'il y a une erreur avec reduce : "mensalary" est un élément du tableau, un "user", il faudrait plutôt écrire "user.salary" à mon avis.
le fait est que la partie "map" de la fonction transforme le tableau de users en tableau de chiffres seulement. mensalary est donc simplement la description d'un des éléments. Si tu fais simplement console.log(userList.map(u=> u.salary)) tu va te retrouver avec juste des chiffres comme liste ( [35000, 42000,32000, 38000]
Dans lexo 2 le 2e exemple concernant min vs avez mis max près de reduce c'est pas plutôt min qu'il faut mettre puisque c'est la valeur minum qu'on veut obtenir ici
Salut, oui min dans le reduce pour obtenir la valeur minimum et max pour la valeur maximum. La valeur dans le paramètre devrait être renommée pour éviter la confusion. 👍 15:21
Ici la question des performances n’est pas du tout prise en compte. Entre accéder à un élément du tableau par son index ou effectuer une fonction sur chaque élément du tableau cela change grandement la rapidité d’exécution …
pour ton exo je suis pas convaincu du tout... sum = 0 userList.forEach (user)-> sum += user.salary + 1000 if user.gender == 'M' mon code JS est plus court et plus clair et plus lisible donc bon... et je créé pas de tableau inutile en mémoire en plus, donc il est plus performant et optimisé...
Tout à fait ! 👍 Mais d'un point de vue pédagogique, some() est simplement un raccourci de syntaxe pour un reduce(). On transforme toujours un tableau en une valeur unique, un booléen en l'occurence.
Bonjour Yvan, est-ce que vous avez le temps mm:ss où vous pensez qu'il y a une erreur ? Normalement l'opérateur modulo "%" de JavaScript nous permet bien de déterminer si un nombre est pair ou impair.
Bonjour, je ne propose aucune formation pour le moment. Tout est disponible sur RUclips. Par contre, si vous le souhaitez, vous pouvez recevoir des nouvelles par email en cliquant sur le lien en description sous la vidéo. Bon code ! Simon.
Salut, dans un premier temps merci pour les explications, mais comme j'ai pas fait tous ça dans mon IDE... shame on me ! j'ai une petite question. Pour l'exercice des salaires suite à tes explications dans ma tete ça ressembler plus à " userList.filter(e => e.gender=='M').map(e=>e.salary+1000).reduce((e1,e2)=> e1.salary + e2.salary)" mais la correction dit " userList.filter(e => e.gender='M').map(e=>e.salary+=1000).reduce((e1,e2)=> e1 + e2)". Mais en faisant comme dans la correction on va avoir en retour un objet qui ressemble à ça non ? "{name: "JohnJoe", gender: 'MM', salary:69000}" Désolé j'ai vu la vidéo sur le téléphone, j'essairai tous ça, en tous cas cela va bien m'aider pour la suite. Merci !
J’étais bluffé au moment de la solution sur le problème des salaires, vraiment excellent ! Ça me donne presque envie de refacto tout mon code et remplacer mes boucles par ces méthodes quand c’est possible !
Au top ! J'espère que vous pourrez tester ça prochainement. Par contre, voyez ça comme une nouvelle habitude à prendre plutôt que de se lancer dans des chantiers de refactoring de 3 jours. Ce sera plus "digeste". 🙂
Bon développement,
Simon.
❤
❤
Hello Simon, belle initiative de vouloir initer aux bases de js
Cependant, une coquille que j'ai relevé : pour l'exo sur les salaires, tu effectues un map avec user.salary += 1000, qui a pour conséquence de modifier l'array de base, userList. Il serait préférable d'utiliser '+' tout simplement.
Cela va un peu dans le sens contraire de ce que tu expliques en milieu de vidéo quand tu parles de .map( ) et d'éviter les effets de bord ... ;)
Ouuups ! Merci François pour avoir relevé la coquille, j'espère que les autres liront ton message. 😉
Bon développement,
Simon.
Non, map() ne modifie pas le tableau de base, il renvoie un nouveau tableau sur lequel il peut travailler avec la fonction reduce juste derrière. Le tableau de base ne bouge pas, zéro effet de bord tout est OK 👌
Définition : La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.
@@fredericlossignol3874 même si map te retourne un nouvel array, les paramètres de son callback ne sont pas immutables. Donc si tu modifies une propriété d'un objet dans le callback, alors tu modifies l'array initial également (et c'est le cas ici avec '+=').
Ma fonction pour le sum est environ 3.7x plus rapide. Une version wasm avec rust pourrait être encore plus rapide.
function get_salary_sum(user_list){let sum = 0;for (let user of user_list) {if (user.gender === 'M'){sum += user.salary + 1000}}return sum}
La version ci-dessous pour savoir si un nombre est impair et légèrement plus rapide .
function is_odd(number) {return (number & 0x1) === 0x1}
Faire de la manipulation de tableaux sans prendre en compte les performances, ce n'est pas très professionnel.
Super vidéo ! Propre, efficace donc MERCI beaucoup. Pour les valeurs max et min, j'ai trouvé cette option avec Math : const maxValueArr = Math.max(...someArr); puis :
const minValueArr = Math.min(...someArr);
J'ai fait pareil ! 😉 J'ai cherché la solution plus concise possible.
Très bonne explication, notamment pour reduce!
D'ailleurs, je sais que le but est de montrer la fonction reduce, mais au sujet des max et min, on peut faire encore plus concis:
const maxValueArr = Math.max(...arr);
const minValueArr = Math.min(...arr);
100% d'accord. 👍
Désolé de ma question néophyte, mais que veux dire les 3 points entre les crochets ? C’est vraiment le code ou on est supposé les changer par une valeur quelconque selon la situation ?
@@philousk9482 oui les trois petits points sont nécessaires et ne peuvent être supprimés. En revanche "arr" est le nom de ton tableau, donc si tu as nommé le tien "numbers" il faudra écrire "Math.max(...numbers)" 😊
@@philousk9482 Sinon pour répondre à ta question concernant le sens caché derrière ces trois petits points "..." il s'agit d'un opérateur de propagation : il est utilisé pour étendre un tableau ou un objet en tant qu'arguments séparés. Par exemple ici, en écrivant "Math.max(numbers)" on envoie un tableau en argument "Math.max([1, 2, 3, 4, 5])" et ça ne fonctionnera pas. Mais si tu écris à la place "Math.max(...numbers)" ce sera comme si tu écrivais juste des nombre en arguments "Math.max(1, 2, 3, 4, 5)" et cette fois-ci tout fonctionnera parfaitement bien
Cool. Map, filter, reduce et sort sont les fondamentaux. Reduce est le plus difficile je confirme.
Pour l'exo 5, j'aurai utilisé la méthode some() qui renvoie true si au moins 1 élément remplie la condition.
Salut @Allan, merci pour ton retour d'expérience !
Je suis pas le seul à avoir galéré sur reduce(), c'est rassurant. 😉
Concernant l'exercice 5, tu as raison car la méthode some() est plus explicite/performante.
(Mais cela reste une variation de reduce() d'un point de vue fondamentale, tableau => value, donc je préfère montrer les fondamentaux d'abord et libre à tout le monde ensuite d'optimiser dans un second temps.)
Bon développement,
Simon.
Vraiment merci , c'est tres excellent cette maniere de coder, l'explication et l'exercice sont de taille pour mieux comprendre map(), filter() et reduce() tout simplement.
Super, c'est top. J'espère vous avoir donné envie de tester ces méthodes prochainement !
Simon.
Excellent, MERCI beaucoup
Dans l'exercice suggéré à la fin, le map est superflu. En effet, on applique un filter pour ne prendre que les hommes mais ensuite on peut faire un reduce où la fonction est (menSalaryTotal + 1000) + menSalary.... En se passant du map, on fait l'économie de devoir créer en mémoire un tableau intermédiaire... Ce qui, sur un grand jeu de donnés peut être salvateur pour les performances 😉
Hello Geofrey, l'objectif pédagogique des vidéos peut parfois faire un peu de mal au côté performance. Mais dans un deuxième temps, après avoir assimilé ce qui est présenté dans cette vidéo, bien sûr le retour est 100% pertinent. 😉
@@codeursenior je disais cela pour ceux qui nous lisent éventuellement afin qu'ils sachent qu'il est possible de faire une économie de performance substantielle 😉
J'espère qu'ils pourront te lire et bénéficier du conseil alors. Merci ! 👍
En approfondissant un peu l'exercice je suis arrivé à la même conclusion, pour ceux que ça intéresse voici le code :
const sumMenSalary = userList
.filter((user) => user.gender === "M")
.reduce((sum, user) => sum + user.salary + 1000, 0);
Parfaitement correct, mais tu doit donner une valeur de départ de 0 (second paramètre de la fonction reduce), si non, le premier élément de la liste n'auras pas de salaire bonifier. c'est un peut compliqué a comprendre/expliqué pour les néofite.
Merci pour cette vidéo tu m'as triplement convaincus ! (m,f,r)
Au top, je compte sur vous pour continuer la propagande : map, filter, reduce > for…loop
Salut a tous, Merci Simon pour ce tuto c clair et net , just pour une mise en forme que je trouve plus simple : const maxValueArr = Math.max(...somArr); Bonne continuation !!!
Bonjour je viens de découvrir cette vidéo car je suis toujours en apprentissage. Et dans le cadre d'amélioration de mon code je viens aussi de comprendre les objets itérables qui est pour moi aussi une autre solution. Certes cette vidéo m'a permis de revoir des notions, merci
tes explication sont insane ! simple et efficace avec des cas concret ! Je le faisait deja avant mais de voir comment tu l'explique c'est super propre
Au top, merci pour ton retour, c'est encourageant comme jamais. 👌
Bon développement,
Simon.
Bonjour, excellent contenus, merci a toi pour cette pédagogie.
Au top, merci pour ton retour.
je voulais vous remercier pour tous vous videos.👏
Merci Naima !
Bonjour Simon j'ai commencé une formation de développeur web, et tes vidéos sont TOP. Bien expliquées, très claire .... Ca devient facile et sa donne du courage pour l'apprentissage. Merci
C'est un plaisir d'entendre ça Samir. Bon courage pour ta formation de développeur et à bientôt sur la chaîne j'espère !
Simon.
J'ai enfin retrouvé cette vidéo ! Merci beaucoup, le top pour apprendre ou revoir Map Filter Reduce !
Hello, oui il faudrait que modifie la vignette : N’utiliser pas la boucle For !
Super vidéo ! Propre, efficace et clair merci pour le partage
Au top, je compte sur vous pour faire la propagande de map, filter et reduce !
Super toujours un plaisir de regarder tes vidéos js est un peu complexe mais avc toi ça devient facile .🙏🏼🙏🏼
Merci, ça fait plaisir de lire votre commentaire !
Bon développement à vous,
Simon.
Je te remercie pour ton travail qui aide réellement.
Merci pour ton retour, c'est un plaisir d'entre ça !
Bon développement,
Simon.
tu m'as fait pleurer 🥺😭... grace a toi je vais finalement devenir un developpeur Javascript.. la meilleur video que j'ai regarder. merci enormement
Félicitation à toi @Severin, tu montres l'exemple à tout le monde, il ne faut rien lâcher ! 👊👊👊
Bon développement et bon apprentissage pour la suite,
À bientôt,
Simon.
@@codeursenior merci 🙏 énormément 😥je pense que je vais te devoir ma carrière de développeur
Ce sera un honneur, soit un exemple pour les autres développeurs de la chaîne. 👊
vraiment frère c'est la meilleur manière de factoriser son code javascript avec les histoires de for, while ou forEach on na plus besoin de ça et c'est très bien et facile a comprendre
Exactement !
Merci pour ton message et à bientôt,
Bon développement,
Simon.
@@codeursenior MERCI Bien
@@thiernoamadousow191 De rien ! Bon développement à toi. 😉
Très clair et très utile. Merci beaucoup.
Merci bien @Gilles pour votre retour.
Bon développement,
Simon.
Super exo, y compris pour la refactorisation du code. J'ai beaucoup appris 👍👍 et merci pour tes exemples concrets. Y a pas à dire, il faut s'entrainer pour que ça devienne un réflexe
Merci Simon pour ces excellents exercices et pour tes conseils, j'écrirai toutes mes méthodes reduce de cette manière maintenant ! (14:59)
Salut simon !!!
Très belle vidéo.
Pour l'exercice 3, concernant le calcul de la valeur maximale ou minimale du tableau.
On pouvait aussi faire simplement ceci.
const max = Math.max(...arr);
const min = Math.min(...arr);
Hello, oui tout à fait. Le but est pédagogique, mais Max et Mix sont des raccourcis de syntaxe de reduce beaucoup plus adaptés dans ce cas. 👍
Waouh quelle vidéo ! Merci
Au plaisir, à bientôt pour une prochaine vidéo !
Bon code,
Simon.
Merci ! Je sens que ça va m’être hyper bénifique et d’une immense joie de te suivre. 😊
You're welcom !
Merci chef !
Génial!! Merci!!!
Très bien comme vidéo. tu donne de bonne exemple et d'explication!!!
Juste pour mettre une basse, je suis une programmeur senior et je comprend pourquoi tu l'explique comme ça. Mais juste pour pinailler un peu :
pour exo #3 il a encore plus simple en javascript pour spécifiquement min et max « Math.min.apply(null, ARRAY) » dont ARRAY est la liste contenant les nombres.
Exact ! Effectivement, il y a la partie pédagogie dans le Video, mais on peut bien sûr pousser la chose 👍 bon code ! Simon.
Tout à fait ! On pourraitégalement utiliser le tableau sous forme déstructurée via le spread operator si on le souhaite "Math.max(...array)"
Wouah.. je me suis cash abonnée, vraiment expliqué c'est du génie bravo !
Bienvenu sur la chaîne @Mathieu !
ohhh mec ca doit faire deux jours que je n'arrive pas résoudre un problème js mais la tu me sauve la vie
Hello Pierre-Louis, c'est un plaisir d'avoir pu débloquer un autre développeur, même d'un millimètre ! 👍
Tu viens just de gagner un nouvelle abonné ... cool !
Simple Efficace ! Merci pour cette super vidéo :-)
Excellente video, j'ai appris beaucoup de choses. Merci 😁
Merci pour votre retour @Kergari !
Bon développement,
Simon.
Excellente vidéo !
À tout hasard, est-ce que tu réalises de formation en lignes pour du JS ?
Tu expliques bien, j'ai tout compris (à part le reduce lié aux salaires, j'ai un peu buggé en mettant un peu de temps pour capter, haha).
Pour ma part, j'enchaine des tutos en ligne, mais c'est souvent du code débité sans réel approche pédagogique et explicative.
Du coup, j'ai l'impression d'en faire des tonnes pour pas vraiment tout comprendre, et ça, c'est vraiment usant, car il suffirait de quelques secondes explicatives pour changer la donne.
Bref, je découvre ta chaine, et donc je viens de m'abonner. Merci, franchement j'ai l'impression d'y voir plus clair :)
je suis étudiant et j'utilise deja cette syntax et les methold de l'object array
Excellent !
Merci Simon
👍
Superbe explication des fondamentaux
Au top, merci pour votre retour. 👍
Merci pour l'explication des 3 méthodes ... Je les utilises souvent mais des fois je retrouve a faire un "filter" au lieux d'un "map" et l'inverse mais avec ton explication je ne me tromperais plus jamais :)
Merci pour ton message @David, c'est top pour la distinction map/filter !
Bon développement,
Simon.
Très fort! Merci beaucoup!
Merci X-Man !
Monsieur, est-ce que vous pouvez faire une vidéo sur les observables (array asynchonous)
Merci frère 😉
Haha de rien !
Franchement juste génial
Merci Quentin !
Bon développement à toi,
Simon.
Je ne suis qu'à la résolution de l'exo1 ( et bien entendu j'ai fais une boucle pour doubler les éléments... ) et j'apprécie tellement tes explications poussées sur le pourquoi utiliser map() !
Eh oui des vidéos approfondie sur des concepts de base c'est vrmt d'la plus value !
Merci pour votre message, la team Map s’agrandie ! 🙂
pour isEveryAlarmActive tu aurais put utilisé every qui est prévu pour : return alarms.every(alarm => alarm.checked)
Hello, si tout à fait ! Ici l'objectif de la vidéo est d'illustrer le fonctionnement de reduce (tableau -> valeur).
Mais every()/some()/Math.mix/Math.max sont des raccourcis bien pratiques !
Dans l'exemple 5 (qui consiste à vérifier si un tableau contient au moins un nombre impaire), la solution présentée n'est pas optimale. En effet, si le premier élément est impair, il est inutile de parcourir le restant dû tableau. Or, ici, tel que présenté, on va devoir avec la fonction filter, parcourir tous les éléments du tableau, jusqu'au bout... Si le tableau contient 100. 000 nombres ca peut représenter une perte de temps conséquente...
Respectueusement 😉
Yep, c'est 100% vrai.
(Pour le contexte, l'objectif prioritaire du code présenté est pédagogique. Une fois que vous avez assimilé ce qui est présenté dans la vidéo, vous pouvez tout à fait suivre la recommandation de Geofrey 👍)
@@codeursenior pour ceux qui nous liraient ou pour une prochaine vidéo pédagogique, il y a encore la fonction Array.prototype.some() qui permet de vérifier si un élément du tableau au moins rempli une certaine condition... Cette méthode renvoie "true" dès qu'un élément satisfait le prédicat passé en paramètre et sinon elle retourne "false" (c'est à dire quand aucun élément du tableau satisfait la condition)...
Yes ! N'hésitez pas à regarder du côté de every / some / Math.min /Math.max qui peuvent être plus subtile que d'utiliser reduce à chaque fois. 👍
Merci Simon!
De rien, bon développement à toi @Jean Christophe Gomis !
Simon.
Hello :)
Je me permet de te poser une (peut-être bête) question:
Si j'ai bien compris, la méthode *filter* parcourt tout le tableau. Est-ce que cela ne serait pas mieux, au niveau des performances, lorsque l'on cherche à déterminer si au moins un valeur de notre tableau remplit une condition, de faire une boucle qui s'arrête à la première valeur remplissant la condition?
Est-ce qu'utiliser une méthode comme *filter* ne va pas impacter, de manière significative, les performances lorsque l'on effectue cette opération sur un tableau contenant plusieurs milliers de données?
J'en profite également pour te remercier pour tout ton travail, c'est super intéressant et agréable à suivre :)
Hello, il n'y a pas de questions bêtes.
Côté frontend, on ne manipule presque jamais des tableaux de plusieurs milliers d'entrées. La question des performances avec filter, map et reduce est donc négligeable.
Même si vous avez 1 million d'utilisateurs à afficher, vous utiliserez la pagination pour les afficher 20 par 20, par exemple.
Super vidéo et merci cependant j'ai une question au niveau des performances parce que j'imagine qu'à un moment ou un autre ces fonctions font un bien une boucle pour parcourir tout les éléments donc sachant qu'on peut résoudre l'exercice des salaires avec une boucle, il ne reste pas plus intéressant que filter, map et reduce cumulé?
Hello effectivement vous avez raison du point de vue de la performance pure. Cependant je proligie toujours la lisibilité du code quoi qu’il arrive. Surtout dans le développement frontend où on ne manipule jamais plus de 10 ou 20 données à la fois pour les présenter dans lInterace. Selon moi Map, filter et reduce me permette de mieux exprimer ce que je fais avec mon code qu’une boucle for. Voila ! 👍
Quelques remarques bienveillantes:
1- .some(e => e % 2 === 0) est plus concis que .filter(e => e % 2 === 0).length > 0
2- .map() et .filter() ne sont pas sans effet de bord car ils ne dupliquent les éléments du tableau d'origine que si ce sont des primitifs (shallow copy, ou copie par référence des autres types). Dans ton exemple avec les salaires par exemple les salaires du tableau d'origine sont réellement modifiés dans les objets (suffit d'appliquer ta formule pour calculer la somme puis de faire un console log du tableau d'origine, les salaires sont modifiés)
3- il existe 3 autres méthodes intéressantes dont je me sers chaque jour beaucoup .find(), .every(), et .sort()
4- A noter aussi que l'objet Map() est aussi un objet intéressant pour travailler sur des listes
PS: Même après 8 ans dans le métier MDN est mon ami de chaque jour
C’est un complément parfait à la vidéo qui se veux pédagogique et une introduction au traitement des tableaux. Merci pour votre apport !
Les notions que tu explique sont utiles et extensible à python également.
Puisque ce langage pour les listes a aussi des méthodes associer pour effectuer certaine action.
mais j’ai une question la méthode map ne fait elle pas un parcours de la liste et en créant une nouvelle avec les option demander.
Comme pour filter et réduce également.
On écrit un code plus propre en utilisant les fonctions que les développeurs du langage ont inclus nativement.
Mais régulièrement dans les formations ils demandent tous de faire les mécanismes manuellement pour voir le concept dernière.
Je me demande qu’elle est le plus rapide entre la méthode et le faire manuellement je crois que je vais essayer de voir ça.
En tout cas tu explique des concept pratique j’ai hâte d’en découvrir d’avantage.
merci c'était super efficace :)
Au top, c'est un plaisir d'entendre ça. Bon développement !
Salut, si tu ne sais plus si "odd" c'est pair ou impair, tu retiens cette technique : dans le mot "odd", il y a un nombre impair de lettres, et dans even, il y a un nombre pair de lettres
Merci
Merci Alex G !
La vidéo est très bien et je pense qu'elle aurait été parfaite si tu avais indiqué comment réaliser les exercices depuis la console de navigation.
Hello, merci pour ton retour. Pouvoir ouvrir la console de votre navigateur : Cmd + Option + C (sur Mac) ou Ctrl + Maj + J (sous Windows).
Bon développement,
À bientôt.
Je viens de regarder cette vidéo avec un peu de retard, je me pose une question quant à la correction sur les salaires.
Tu fais du filter, du map et du reduce. Ok c'est joli, ça fait super bien le taff et on comprend parfaitement. Mais pour moi c'est du joli...
Perso, j'aurai fait :
const manSalary = userList.reduce((salary, u) => salary + (u.gender === 'M' ? u.salary + 1000 : 0))
Une seule ligne, et j'ai pas besoin de parcourir trois fois des tableaux.
Donc à mon avis, ma solution est plus rapide et moins consommateur.
Un avis ?
Merci. :)
😂😂😂😂😂😂 suis mort de rire. Mais en vrai, nous aimons très bien ta manière d'expliquer les cours.
Merci pour ton retour @Abdoul ! 👊
À bientôt j'espère et bon développement,
Simon.
super vidéo, très claire et bien expliquée ! J'ai deux questions.
1°) Dans l'exo 2, le .filter va parcourir le tableau doubleArr 2 fois et créer 2 nouveaux tableaux, y a t-il moyen de créer les deux nouveaux tableau en ne parcourant doubleArr qu'une fois ?
2°) Dans l'exo 5, si le reduce trouve une oddValue en première position, va t-il devoir finir de parcourir tout le tableau pour renvoyer true ?
Merci pour le taf.
Hello @Benoit, merci.
Voici mes réponses :
1) Filter permet d'expliciter votre traitement, plutôt que de perdre en lisibilité pour optimiser des nanos secondes que personne ne vous demanderas jamais.
2) Effectivement, on peut utiliser des méthodes plus optimisés une fois que l'on est à l'aise avec reduce(), comme some() ou every().
De manière, je pense que l'objectif est de créer du code performant pour les humais (lisibilité) plutôt que pour les machines.
Bon développement,
Simon.
Explications limpides, merci !
Merci pour ton retour Kevin, bon développement à toi !
Simon.
Salut à tous, Pour les salaires je propose ça : court et éfficace :
const menSalaryTotal = userList.map(user => user.gender === "male" ? {...user, salary: user.salary += 1000} : user)
Merci Simon Top…
Merci pour ton retour Rachid,
Bon développement,
Simon.
Super vidéo, ça fait un moment que je connais map, filter, reduce, mais j'ai encore un peu de mal à me défaire de mes réflexes "while", mais ça rentre. Avec Reduce j'ai plus de mal, et j'ai un pb avec la valeur initiale de l'accumulateur, pour moi il faudrait l'indiquer obligatoirement
Bonjour @Jean-Bernard, merci pour ton retour.
Concernant le reduce(), je vous encourage effectivement à expliciter la valeur de retour, cela se force à réfléchir dans un premier temps, et explicite le fonctionnement du code à la relecture.
S'obliger à initialiser son accumulateur me semble donc une bonne pratique. 👍 (Même si j'ai pris des raccourcis avec le temps !)
Bon développement pour la suite,
Simon.
Très pratiques ces solutions. Merci. Et si tu nous parlais prochainement des Promesse de javascript pour les évènements asynchrones ? Actuellement je fais recours aux callback, mais je cherche une façon de faire plus "pro" !
Hello ! Je ne pense pas faire de vidéo sur l'asynchrone avec les Promesses. Sur la chaîne, je me concentrerai plutôt sur la programmation réactive et RxJS. C'est une solution que je préfère pour la gestion de traitements asynchrones complexes.
Bon développement,
Simon.
La programmation fonctionnel est assez puissante.
super géniale
Merci !
Bon développement,
Simon
j ai pu faire le dernier exercice avec 2 boucle FOR :
const genre = []
for(let i=0;i
Abdoul Karim a raison t'es trop chaud 😁😁
🔥
Trop top
👍
Pour l'exemple avec le map je trouves deux des arguments un peu tiré par les cheveux. Pour la variable intermédiaire on en a pas en utilisant le for..of, et pour le fait que c'est en une seule ligne ça c'est un choix de développement, on peut très bien mettre le for en one liner si ça nous pose un problème de l'avoir sur 3 lignes, et inversement mettre le map sur 3 ligne en ajoutant les bracket dans la fonction anonyme, ce qu'on seras d'ailleurs obligé de faire si on doit faire plusieurs traitement et pas qu'un seul.
Sinon très intéressants, j'utiliserais certainement moins de boucle désormais, et j'avais jamais vraiment compris le reduce donc merci beaucoup pour ça aussi !
Salut @kArTechns, merci pour ton retour constructif.
Mes retours rapides :
- For...of : Tu as tout à fait raison. Je mentionne bien le for{} "nature" dans la vidéo mais il y a d'autres pistes d'améliorations que le map() pour éviter la variable intermédiaire, dont le for...of effectivement.
- 1 ligne vs 3 lignes : Pas tout à fait d'accord, car faire tenir un traitement for() sur une ligne, ça doit être costaud et surprenant à relire. Une fonction fléchée d'une ligne peut tout à s'écrire sans brackets, c'est une convention répandue. Donc techniquement je suis d'accord avec toi, dans le code du quotidien, je maintiens mon 1 ligne VS 3 lignes. 😉
Qu'en penses-tu ?
Au plaisir d'échanger,
À bientôt,
Simon.
ouais top merci
Bon code avec map, filter et reduce. 🚀
Dans la fonction "toggleAlarmList()" à la ligne 2 (condition de la ternaire) "return isEveryAlarmActive() ?" serait plus juste, non?
Excellent le fait de prendre des exemples concrets, bonne continuation.
Hello Eric, si tu me mets le time-link je peux regarder ça rapidement.
Quoi qu'il en soit tu as surement raison, j'ai tendance à faire un méli-melo entre la prépa de la vidéo/tournage/montage. ^^
Hello @@codeursenior à 22:52, soit tu fais appel à la fonction "isEveryAlarmActive()" définie à 22:34 soit tu as défini une variable du même nom?
@@Green68200 Ok, j'ai compris. Alors les exemples de code sont plus là pour la compréhension. Cela ne correspond pas forcément à une codebase complète. Tu peux tout à fait stocker le résultat de la méthode `isEveryAlarmActive()` dans une variable temporaire pour un autre calcul ultérieur. 👍
Super vidéo ! Une raison de ne pas utiliser some() pour l'exo #5, avec quelque chose comme : someArr.some(e => e % 2 == 0) ?
Hello Mickaël, 100% d'accord. La seule "raison" est pédagogique. D'abord faire comprendre map/filter/reduce. Ensuite, libre à chacun de creuser et d'aller utiliser les "raccourcis" de reduce (tableau -> valeur unique). Par exemple : every/some/Math.max...etc...
Bon développement,
Simon.
Salut,
Pour l'exercice 5 l'utilisation de some() était également possible non ?
Si ! En fait fondamentalement some() est une simple optimisation de ... reduce(), c'est-à-dire transformer un tableau en une valeur, ici un booléen. Un bon exercice est de réimplémenté some() avec reduce() ! 😉
Ce serait bien d'indiquer les coquilles/amélioration proposées par François Lx, Allan from Paris et Geofrey van Hecke minimalement dans la description ou (révons un peu) directement dans la vidéo sous forme de "popup".
Merci pour cette vidéo intéressante. J'ai une question et une remarque.
La question :
En terme d'optimisation, quand on veut juste s'assurer de la présence d'une valeur sur des grands tableaux, est-ce qu'un filter suivi d'un length n'est pas plus coûteux qu'un parcours qui s'arrête à la première valeur correcte pour renvoyer un booleen ?
La remarque :
Pour ton exo sur le total gagné, je reconnais l'intérêt pédagogique d'avoir voulu utiliser filter, map et reduce, mais je me serais personnellement épargné une ligne (et un parcours de tableau) en virant l'étape map et en incluant l'ajout de 1000 directement dans reduce :
menSalaryTotal = userList.filter(user => user.gender == 'M')
.reduce((menSalaryTotal, menSalary) => menSalaryTotal + menSalary + 1000);
Salut, très instructif et bien expliqué, mais j'ai une question concernant la méthode reduce(), je comprend bien l'avantage pour retourner la somme , mais pour la valeur max ou min a t elle un avantage par rapport a écrire ;
const maxVal = Math.max(...someArr) ; ?
Bien à vous et encore merci pour vos tutos géniaux ...Et ouep ça vaut le coup..
Merci pour votre retour, reduce est présente avec le côté pédagogique en tête ici. Effectivement je recommande Max ou Min pour calculer la valeur respective. Il faut le voir comme un raccourcis de syntaxe par rapport à Reduce. Obtenir une valeur à partir d’une collection.
Merci beaucoup Simon pour cette belle présentation, je l'ai trouvé particulièrement utile pour moi, car je suis un gros consommation des boucles. Par contre, j'ai bien réussi le petit test de la fin avec toujours une préoccupation sur la fonction reduce(). Puisque je me demande bien comment il a pu calculer la somme sans que je lui passe la clé "salary" dans la fonction, parce qu'en ajoutant cette clé, le résultat devient "NaN"
const sum = userList.filter(user => user.gender == 'M').map(e => e.salary + 1000).reduce((sum, user) => sum + user.salary);
Hello Ulrich, top si vous faites moins de boucles !
Concernant votre question, c'est parce que dans la première opération map() a tranformé votre tableau de User en un tableau de nombre (les salaires).
const user = [...] // Tableau d'objets User
const user = [...].map(user => user.salary); // Tableau de nombres, salaires
Est-ce que c'est plus clair pour vous ?
Bon développement,
Simon.
Bonjour Simon,
J'apprends l'informatique il y a peu, alors excuse-moi à l'avance si ma question peut-être un peu idiote.
- Ma question est dans l'exercice #1 (Je comprends ou tu veux en venir), mais je ne comprends pas quand je regarde le résultat sur la console.log je vois qu'il m'affiche le douche [2, 4, 6, 8, 10]. En suivant la logique, je ne devrai pas plutôt avoir deux fois [1, 2, 3, 4, 5] au lieux d'avoir le double ?
Merci de pouvoir me éclaircir cette logique dans l'informatique comme aussi, merci pour tes contenus :)
Hello Romero, tu fais bien de poser de question. La seule chose d'idiote, c'est de ne pas poser de question. En fait, la méthode *map* va prendre en paramètre chaque élément du tableau initiale, successivement. Tu obtiendras donc un autre tableau de la même longeur en sortie, mais avec chaque élément transofrmé.
[1, 10].map(e => e x 2) // [2, 20]
À bientôt !
Bonjour Simon merci pour cette vidéo. Je cherche à sélectionner la value d'un input parmi d'autres input de même classe 'pas d'id, pour des raisons imposées + des buttons sans id également. Le button permettrait de sélectionner la value de l'input, et de la copier. Je parviens à sélectionner toutes les values de tous les input. Et malgré de nombreux essais aves this, je ne parviens pas à sélectionner l'input sur laquelle /lequel je vais cliquer. Si tu as une solution je suis preneuse, merci bcp
Hello, c'est par ici => ruclips.net/video/DTIYVffhJuU/видео.html
exo3 : pourquoi du coup tu as mis pour le 2ème cas le nom de l'accumulateur à "max" logiquement il devrait être comme tu dis , la valeur que tu attends en sortie non, donc "min" ? (c'est juste du nonmage ;-) )
La méthode some() teste si au moins un élément du tableau passe le test implémenté par la fonction fournie. Elle renvoie un booléen indiquant le résultat du test.
Hello, tout à fait. Every et Some sont des raccourcis de syntaxe de reduce() bien pratiques.
@16:52 : const isOddValueArr = someArr.some(e => e % 2 != 0) permet de s'arrêter dès qu'on a la première valeur odd, ça évite de calculer les N éléments de l'array (mieux pour les perfs)
dans le même genre il y a someArr.every qui vérifie que tous les éléments de l'array vérifient une condition
Tout à fait, n'hésitez pas à abuser de some() et every(), c'est un régal à utiliser.
(Par rapport à la vidéo, some() et every() sont des variantes de reduce() au niveau de la réflexion. On transforme un tableau en une valeur unique, à savoir un booléen)
Merci pour la vidéo ! Pour l'exo 5, bon c'est peut-être un peu moins lisible mais je me dis qu'au moins je ne lance qu'un seul traitement de l'array niveau opti : const maxMenSalary = userList.reduce((total, currentUser) => currentUser.gender === 'M' ? total + currentUser.salary + 1000 : total, 0)
Effectivement, ça fonctionne ! 👍
Peut-être la lisibilité un peu plus costaud à la relecture (ternaire/condition dans un reduce).
Bon développement pour la suite,
Simon.
Ça aurait été parfait avec la mention des méthodes `.every` et `.some`.
Super j'ai refait les exercices et du coup je trouve ça extrêmement pratique je compte passer a react ceq méthodes sont telle aussi valable labas?
Salut, oui ces méthodes sont 100% Vanilla JavaScript ! Cela vous servira au quotidien que vous soyez développeur React, VueJS ou Angular. 👍
Bon développement,
Simon.
Pour l'exo 3 j'avais simplement fait Math.max(...someArr) et Math.min(...someArr)
Et pour l'exo 5 : const isOddValueArr = someArr.findIndex(a=>a%2!=0) != -1;
Ce genre de petit hack on en redemande encore et encore avec ça déjà on passe le cap des tableaux ds l'apprentissage du js.
C'est bien noté @Goba Joseph !
@@codeursenior jai pris ta formation node js peut ton lentamer sans connaître un framework front ou apprendre un framework frobt avant de se lancer sur du node
Holà, non NodeJS ne nécessite pas de connaître un framework frontend. Après dans le cas où tu développes une API Rest, ça te permet d'avoir une culture général pour comprendre pourquoi on expose des JSON à certaines URL. Mais ça reste du bonus. Au boulot, pas d'excuses ! 😉
@@codeursenior merci je m'y met 😂 . En tt cas merci
@@gobajoseph5064 Bon apprentissage !
Il ya les méthodes some() et Every qui peuvent aider aussi
Tout à fait, on peut les voir comme des "raccourcis" de reduce (tableau -> valeur)
Quand on te dit frérot , oas la peine de faire cette relarque du début. Ton public est francophone et non francais seulement.
Merci pour le tuto
Merci pour votre remarque, ça a changé ma vie. Bon code !
Salut avez vous une formation complete en javaScript?
Hello, pas pour le moment. Si Angular vous intéresse, vous trouverez un workshop gratuit sur le site angularsenior.fr. Bon code, Simon.
pour l'exo 5 il me semble qu'il y a une erreur avec reduce : "mensalary" est un élément du tableau, un "user", il faudrait plutôt écrire "user.salary" à mon avis.
le fait est que la partie "map" de la fonction transforme le tableau de users en tableau de chiffres seulement. mensalary est donc simplement la description d'un des éléments.
Si tu fais simplement console.log(userList.map(u=> u.salary)) tu va te retrouver avec juste des chiffres comme liste ( [35000, 42000,32000, 38000]
Dans lexo 2 le 2e exemple concernant min vs avez mis max près de reduce c'est pas plutôt min qu'il faut mettre puisque c'est la valeur minum qu'on veut obtenir ici
Salut, oui min dans le reduce pour obtenir la valeur minimum et max pour la valeur maximum. La valeur dans le paramètre devrait être renommée pour éviter la confusion. 👍
15:21
Ici la question des performances n’est pas du tout prise en compte. Entre accéder à un élément du tableau par son index ou effectuer une fonction sur chaque élément du tableau cela change grandement la rapidité d’exécution …
pour ton exo je suis pas convaincu du tout...
sum = 0
userList.forEach (user)->
sum += user.salary + 1000 if user.gender == 'M'
mon code JS est plus court et plus clair et plus lisible donc bon... et je créé pas de tableau inutile en mémoire en plus, donc il est plus performant et optimisé...
Pour l'exo 5 tu peux use .some() non ?
Tout à fait ! 👍
Mais d'un point de vue pédagogique, some() est simplement un raccourci de syntaxe pour un reduce(). On transforme toujours un tableau en une valeur unique, un booléen en l'occurence.
c'est peut êtres moi qui me rate quelques part mais exo 5 qui sert a s'avoir si c'est pair ou impaire si j'ai bien compris renvoi toujours true
Bonjour Yvan, est-ce que vous avez le temps mm:ss où vous pensez qu'il y a une erreur ? Normalement l'opérateur modulo "%" de JavaScript nous permet bien de déterminer si un nombre est pair ou impair.
bonjour comment rejoindre la formation en prestenciel
Bonjour, je ne propose aucune formation pour le moment. Tout est disponible sur RUclips.
Par contre, si vous le souhaitez, vous pouvez recevoir des nouvelles par email en cliquant sur le lien en description sous la vidéo.
Bon code !
Simon.
Salut, dans un premier temps merci pour les explications, mais comme j'ai pas fait tous ça dans mon IDE... shame on me ! j'ai une petite question.
Pour l'exercice des salaires suite à tes explications dans ma tete ça ressembler plus à " userList.filter(e => e.gender=='M').map(e=>e.salary+1000).reduce((e1,e2)=> e1.salary + e2.salary)" mais la correction dit " userList.filter(e => e.gender='M').map(e=>e.salary+=1000).reduce((e1,e2)=> e1 + e2)".
Mais en faisant comme dans la correction on va avoir en retour un objet qui ressemble à ça non ? "{name: "JohnJoe", gender: 'MM', salary:69000}"
Désolé j'ai vu la vidéo sur le téléphone, j'essairai tous ça, en tous cas cela va bien m'aider pour la suite. Merci !